<template>
	<view class="page colorBj-e1e1e1">
		<view class="" style="flex: 1;">
			<!-- <up-navbar title="百霸智育" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1" placeholder></up-navbar> -->
			<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
			<view class="">
				<view class="width-full height-full padding-30 box-sizing">
					<view class="parent-container">
						<up-tabs :scrollable="false" :list="tabs" @click="tabClick" lineColor="#51D580"></up-tabs>
					</view>

					<view class="" v-if="video_open == 1">
						<video :src="currentVideoSrc" @play="onPlay" @pause="onPause" @ended="onEnded"
							:autoplay="shouldAutoplay" class="video" v-if="tabIndex == 0"></video>
						<video :src="currentVideoSrc2" @play="onPlay" @pause="onPause" @ended="onEnded"
							:autoplay="shouldAutoplay2" class="video" v-else></video>
					</view>
					<view class="paddingBottom-20 u-border-bottom paddingTop-20" v-for='(item,index) in list'
						:key='index'>
						<view class="flex items-center ">
							<view class="weight-700 marginRight-10">
								{{item.b_title}}
							</view>
							<view class="flex items-center" v-for="(i, index) in item.s_title" :key="index">
								<view
									class="width-20 height-20 borderRadius-10 marginLeft-10 marginRight-10 colorBj-fff"
									:style="currentIndex === 0? { borderColor: getColorForSubTitle(index, item), borderWidth: '2px', borderStyle: 'solid' } : { borderColor: getColorForSubTitle2(index, item), borderWidth: '2px', borderStyle: 'solid' }">
								</view>
								<view class="fontSize-26 color-aaa">
									{{ i }}
								</view>
							</view>
						</view>
						<view class="flex items-center flex-wrap">
							<view
								class="borderRadius-10 text-center colorBj-fff item-box width-100 height-60 marginLeft-20 marginTop-20"
								v-for='(innerItem,innerIndex) in item.phonetic' :key='innerIndex'
								:style="getPhoneticItemStyle(innerItem)" @click='changeVideoSrc(innerItem)'>
								{{innerItem.phonetic}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		reactive,
		onMounted
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';

	const list = ref([]);
	const video_open = ref(0);
	const currentVideoSrc = ref(null);
	const currentVideoSrc2 = ref(null);

	const phoneticIndexApi = inject('phoneticIndex');
	const addPhoneticStudyApi = inject('addPhoneticStudy');
	const getPhoneticStudyApi = inject('getPhoneticStudy');

	const title = ref('百霸智育');
	const tabbarCurrent = ref(0);
	const activeTab = ref(0);
	const currentIndex = ref(0);
	const tabIndex = ref(0);
	const studyList = ref([]);
	const tabs = ref([{
			name: '英式发音'
		},
		{
			name: '美式发音'
		},
	]);

	onMounted(() => {
		phoneticIndexApi({
			pro_sys: 'KK' //英式
		}).then(res => {
			console.log(res, '音标接口');
			list.value = res.list;
			video_open.value = res.video_open;
			currentVideoSrc.value = res.list[0].phonetic[0].video;
			getPhoneticStudyApi().then(res => {
				console.log(res, 'getPhoneticStudy');
				studyList.value = res;
			});
		});
	});

	const switchTab = (index) => {
		currentIndex.value = index;
	};

	const colorMap = new Map();
	const colorMap2 = new Map();
	const definedColors = ['#f7bfd4', '#cfe1d2', '#99caf1', '#9176c3', '#fbcfbe', '#fcbd71', '#71d5a1', '#c8c9cc'];
	const definedColors2 = ['#f7bfd4', '#cfe1d2', '#99caf1', '#9176c3', '#fbcfbe', '#fcbd71', '#71d5a1'];
	const getColorByTag = (tag) => {
		if (!colorMap.has(tag)) {
			colorMap.set(tag, definedColors[colorMap.size % definedColors.length]);
		}
		return colorMap.get(tag);
	};
	const getColorByTag2 = (tag) => {
		if (!colorMap2.has(tag)) {
			colorMap2.set(tag, definedColors2[colorMap2.size % definedColors2.length]);
		}
		return colorMap2.get(tag);
	};
	let subTitleColorIndex = 0;
	const getColorForSubTitle = (index, item) => {
		const color = definedColors[subTitleColorIndex];
		subTitleColorIndex = (subTitleColorIndex + 1) % definedColors.length;
		return color;
	};
	const getColorForSubTitle2 = (index, item) => {
		const color = definedColors2[subTitleColorIndex];
		subTitleColorIndex = (subTitleColorIndex + 1) % definedColors2.length;
		return color;
	};
	const tabClick = (e) => {
		tabIndex.value = e.index;
		if (e.index == 0) {
			shouldAutoplay.value = false;
			phoneticIndexApi({
				pro_sys: 'KK' //英式
			}).then(res => {
				// console.log(res, '音标接口');
				list.value = res.list;
				video_open.value = res.video_open;
				currentVideoSrc.value = res.list[0].phonetic[0].video;
				subTitleColorIndex = 0;
				currentIndex.value = e.index;
			});
		} else if (e.index == 1) {
			shouldAutoplay2.value = false;
			phoneticIndexApi({
				pro_sys: 'IPA' //美式
			}).then(res => {
				// console.log(res, '音标接口');
				list.value = res.list;
				video_open.value = res.video_open;
				currentVideoSrc2.value = res.list[0].phonetic[0].video;
				subTitleColorIndex = 0;
				currentIndex.value = e.index;
			});
		}
	};


	const groupChange = (n) => {
		console.log('groupChange', n);
	};

	const radioChange = (n) => {
		console.log('radioChange', n);
	};
	const shouldAutoplay = ref(false);
	const shouldAutoplay2 = ref(false);
	const changeVideoSrc = (item) => {
		if (tabIndex.value == 0) {
			currentVideoSrc.value = item.video;
			shouldAutoplay.value = true;
			addPhoneticStudyApi({
				phonetic_id: item.phonetic_id
			}).then(res => {});
		} else if (tabIndex.value == 1) {
			currentVideoSrc2.value = item.video;
			shouldAutoplay2.value = true;
			addPhoneticStudyApi({
				phonetic_id: item.phonetic_id
			}).then(res => {});
		}
	};

	const getPhoneticItemStyle = (innerItem) => {
		let style = {};
		if (currentIndex.value === 0) {
			style = {
				borderColor: getColorByTag(innerItem.tag),
				borderWidth: '2px',
				borderStyle: 'solid'
			};
		} else {
			style = {
				borderColor: getColorByTag2(innerItem.tag),
				borderWidth: '2px',
				borderStyle: 'solid'
			};
		}
		if (studyList.value.some(studyItem => studyItem.phonetic_id === innerItem.phonetic_id)) {
			style.backgroundColor = '#edf5ee';
		}
		return style;
	};
</script>

<style lang="scss" scoped>
	.page {
		flex: 1;
		background-color: #f1f1f1;
		height: 100%;
	}

	.item-box {
		line-height: 60rpx;
	}

	.video {
		width: 100%;
	}
</style>